<template>
  <div class="seafood">
    <div class="shengxianbj">
      <topnav style="padding-top: 30px"></topnav>
      <div class="zhong">
        <div class="zuo_gz">
          <p>观智生鲜小程序</p>
          <span>为商家打造 生鲜大品牌专属小程序</span>
          <div class="manavs">
            <a href="javasript:void(0);">免费获取 生鲜小程序方案</a>
          </div>
        </div>
      </div>
    </div>
    <div class="phone_shengxianbj">
      <phonenav :backcolor="backcolor" :type="type"></phonenav>
    </div>
    <!-- <div class="phone_shengxianbj">
      <div class="body">
        <img src="../assets/image/seafood/logo.png" alt="大智" />
        <el-dropdown class="phone_nav">
          <span class="el-dropdown-link">
            <div>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in nav" :key="index">{{item.title}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div> -->
    <div class="shengxian_one">
      <div class="zhong">
        <div class="title">
          <p>观智生鲜小程序特点</p>
        </div>
        <ul>
          <li v-for="(item, index) in shengxianone_img" :key="index">
            <div><img :src="item.img" alt="" /></div>
            <b>{{ item.text }}</b>
          </li>
        </ul>
      </div>
    </div>
    <div class="characteristic bgcolor1">
      <div class="body">
        <ul>
          <p>01</p>
          <li>拥有大品牌 <span>百果园</span>的UI界面</li>
        </ul>
        <div>
          <img src="../assets/image/seafood/shen_a1.png" alt="" />
        </div>
      </div>
    </div>
    <div class="characteristic characteristic2">
      <div class="body">
        <div>
          <img src="../assets/image/seafood/shen_a2.png" alt="" />
        </div>
        <ul>
          <p>02</p>
          <li>拥有大品牌 <span>每日优鲜</span>的UI界面</li>
        </ul>
      </div>
    </div>
    <div class="characteristic bgcolor1">
      <div class="body">
        <ul>
          <p>03</p>
          <li>拥有大品牌 <span>叮咚买菜</span>的UI界面</li>
        </ul>
        <div>
          <img src="../assets/image/seafood/shen_a3.png" alt="" />
        </div>
      </div>
    </div>
    <div class="threeselectui">
      <div class="body">
        <img src="../assets/image/seafood/shen_b1.png" alt="" />
        <div class="threeui_content">
          <p class="threeui_title">三大品牌UI界面任意选</p>
          <p class="threeui_remarks">
            目前我们将会提供三套UI可自由选择，未来将开发多套UI
          </p>
          <p class="threeui_if">如果</p>
          <div class="threeui_text">还不够，也可按要求设计一级页面</div>
          <img src="../assets/image/seafood/shen_b2.png" alt="" />
        </div>
      </div>
    </div>
    <div class="fresh">
      <div class="body">
        <p class="title">强大的只为生鲜而生的功能大全</p>
        <p class="content">观智生鲜小程序 强大功能更多认为同样的功能</p>
        <p class="content">
          需要和小程序所有框架以业务场景相符，能发挥出推广运营的效果做为真目的，而并非伪功能
        </p>
        <img
          src="../assets/image/seafood/shen_b3.png"
          alt=""
          class="body_img"
        />
      </div>
    </div>
    <div class="shengxian_four">
      <div class="Marketing_text">
        <p>01</p>
        <span>营销裂变</span>
      </div>
      <div class="Marketing-content">
        <div
          class="content-introduce"
          v-for="(item, index) in Marketing"
          :key="index"
        >
          <div class="content-left">
            <img :src="item.image" alt="" style="" />
          </div>
          <div class="contetn-right">
            <span>{{ item.Packagetitle }}</span>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="vip-shengxian_four">
      <div class="Marketing_text">
        <p>02</p>
        <span>会员功能</span>
      </div>
      <div
        class="vip-Marketing-content"
        v-for="(item, index) in vipUse"
        :key="index"
      >
        <div class="vip-content-introduce">
          <div class="vip-content-left">
            <img :src="item.image" alt="" style="" />
          </div>
          <div class="vip-contetn-right">
            <span>{{ item.Packagetitle }}</span>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="shengxian_four">
      <div class="Marketing_text">
        <p>03</p>
        <span> 多门店管理</span>
      </div>
      <div class="Marketing-content">
        <div
          class="content-introduce"
          v-for="(item, index) in multivariate"
          :key="index"
        >
          <div class="content-left">
            <img :src="item.image" alt="" style="" />
          </div>
          <div class="contetn-right">
            <span>{{ item.Packagetitle }}</span>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="vip-shengxian_four">
      <div class="Marketing_text">
        <p>04</p>
        <span>其他部份功能</span>
      </div>
      <div class="other">
        <ul>
          <li v-for="(item, index) in others" :key="index">
            <div class="other-image">
              <img :src="item.image" alt=""  />
            </div>
            <b>{{ item.label }}</b>
          </li>
        </ul>
      </div>
      <div class="manav">了解更多功能</div>
    </div>

    <div class="dynamic">
      <div class="dyn-center">
        <!-- <h2>生鲜小程序动态</h2> -->
        <div class="dyn-content">
          <div class="dyn-left">
            <a href="#">
              <img
                src="@/assets/image/seafood/20200610184932_2410.jpg"
                alt=""
                style="width: 490px; height: 326px"
              />
            </a>
            <span>10家生鲜电商小程序APP平台测试，各有利弊</span>
          </div>
          <div class="dyn-right">
            <ul>
              <li v-for="(item, index) in dynamic" :key="index">
                <a href="#">{{ item.label }}</a>
              </li>
              <!-- <li><a href="#">百果园小程序直播，助力单日GMV超3000万</a></li>
                <li><a href="#">百果园小程序直播，助力单日GMV超3000万</a></li>
                <li><a href="#">百果园小程序直播，助力单日GMV超3000万</a></li>
                <li><a href="#">百果园小程序直播，助力单日GMV超3000万</a></li>
                <li><a href="#">百果园小程序直播，助力单日GMV超3000万</a></li> -->
            </ul>
          </div>
        </div>
        <a href="#" class="mores">></a>
      </div>
    </div>
    <last></last>
    <location></location>
  </div>
</template>
<script>
import last from "../components/Last.vue";
import topnav from "@/components/Topnav.vue";
import location from "@/components/Location.vue";
import phonenav from "@/components/Phone_nav.vue";
export default {
  name: "Seafood",
  data() {
    return {
      logo: require("../assets/image/seafood/logo.png"),
      nav: [
        { title: "首页" },
        { title: "关于我们" },
        { title: "商城小程序" },
        { title: "生鲜小程序" },
        { title: "案例展示" },
        { title: "服务项目" },
        { title: "联系我们" },
      ],
      backcolor: "seafood/shenxianbj.jpg",
      type: "",
      shengxianone_img: [
        {
          id: 0,
          img: require("@/assets/image/seafood/shen_v1.png"),
          text: "强大的功能",
        },
        {
          id: 1,
          img: require("@/assets/image/seafood/shen_v2.png"),
          text: "专属的生鲜推广解决方案",
        },
        {
          id: 2,
          img: require("@/assets/image/seafood/shen_v3.png"),
          text: "让你更好的打开线上卖货",
        },
        {
          id: 3,
          img: require("@/assets/image/seafood/shen_v4.png"),
          text: "有多款大品牌设计UI",
        },
      ],
      Marketing: [
        {
          image: require("@/assets/image/seafood/shen_v1-1.png"),
          Packagetitle: "营销裂变",
          label: "后台可自己设置新用户立减金额",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-2.png"),
          Packagetitle: "券裂变",
          label:
            "邀请好友助力，可获得不同金额的优惠券，邀请新用户下单可在获得优惠券后台可设置管理",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-3.png"),
          Packagetitle: "新用户专享",
          label: "后台可设置管理具体某个单品或分类产品，用户只能新用户下单",
        },
      ],
      vipUse: [
        {
          image: require("@/assets/image/seafood/shen_v1-4.png"),
          Packagetitle: "会员充值",
          label: "后台可自已设置充值不同金额 获得赠送余额，例如充100，返10元",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-5.png"),
          Packagetitle: "会员专属价",
          label: "充值的了会员即可获得会员权限，可根据不同产品设置会员价",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-6.png"),
          Packagetitle: "会员特权",
          label: "后台可设置管理具体某个单品或分类产品，用户只能会员用户下单",
        },
      ],
      multivariate: [
        {
          image: require("@/assets/image/seafood/shen_v1-7.png"),
          Packagetitle: "门店设置",
          label:
            "后台可自由添加多个门店，例如名称，地址，是否提供自提或配送服务",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-8.png"),
          Packagetitle: "自提配送",
          label: "通过定位用户可自由选择自提还是配送服务",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-9.png"),
          Packagetitle: "单店管理",
          label:
            "后台可查看设置，单个店的产品是否提供展示，是否享有会员或新用户特权， 能做到可根据线下或线上场景自由配置",
        },
      ],
      others: [
        {
          image: require("@/assets/image/seafood/shen_v1-10.png"),
          label: "优惠券",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-11.png"),
          label: "拼团",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-12.png"),
          label: "限时抢购",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-13.png"),
          label: "订单",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-14.png"),
          label: "商品管理",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-15.png"),
          label: "支付",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-16.png"),
          label: "物流",
        },
        {
          image: require("@/assets/image/seafood/shen_v1-17.png"),
          label: "进销存",
        },
      ],
      dynamic: [
        { label: "百果园小程序直播，助力单日GMV超3000万" },
        { label: "水果生鲜小程序运营干货，手把手教你如何做线上！" },
        { label: "疫情下生鲜零售正当时 小程序助生鲜电商“出圈”" },
        { label: "生鲜电商三种模式与长期胜负手的较量" },
        { label: "小熊时蔬”小程序，一个月帮农户卖菜近30万公斤" },
        { label: "每日优鲜小程序案例分享" },
      ],
    };
  },
  components: {
    last,
    topnav,
    location,
    phonenav,
  },
};
</script>
<style scoped lang="less">
h1,
h2,
h3,
h4,
h5,
ol,
ul,
p {
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
//下半部分公共样式
.shengxian_four {
  width: 100%;
  height: auto;
  /* background-color: black; */
}
.vip-shengxian_four {
  width: 100%;
  height: 680px;
  /* background-color: black; */
  background-color: #e7fce7;
}
/* 最外层的样式 */

/* 营销裂变的css */
.Marketing_text {
  height: 53px;
  padding: 30px 0;
  text-align: center;
}
.Marketing_text p {
  display: inline-block;
  color: #666;
  font-size: 40px;
  font-family: Arial;
  font-weight: bold;
}
.Marketing_text span {
  color: #49a48c;
  font-weight: bold;
  font-size: 40px;
  display: inline-block;
}
/* 营销裂变的css */

/* 营销裂变内容样式 */
.Marketing-content {
  width: 1100px;
  margin: auto;
}
.content-introduce {
  margin-bottom: 30px;
  height: 150px;
  display: flex;
  width: 100%;
}
.content-left {
  width: 150px;
  height: 150px;
  background-color: #dfffea;
  border-radius: 5px;
  margin-left: 23%;
}
.content-left img {
  margin-left: 30px;
  margin-top: 30px;
}
.contetn-right span {
  display: block;
}
.contetn-right {
  margin-left: 40px;
  margin-top: 25px;
  /* width: 50%; */
}
.contetn-right span:nth-child(1) {
  font-weight: bold;
  color: #49a48c;
  font-size: 30px;
}
.contetn-right span {
  color: #666;
  font-size: 18px;
  width: 554px;
}
/* 营销裂变内容样式 */

/* 会员功能 */
.vip-Marketing-content {
  width: 1100px;
  margin: auto;
}
.vip-content-introduce {
  margin-bottom: 30px;
  height: 150px;
  display: flex;
}
.vip-content-left {
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 5px;
  margin-left: 23%;
}
.vip-contetn-right span {
  display: block;
}
.vip-contetn-right {
  margin-left: 40px;
  margin-top: 25px;
  /* width: 50%; */
}
.vip-contetn-right span:nth-child(1) {
  font-weight: bold;
  color: #49a48c;
  font-size: 24px;
}
.vip-contetn-right span {
  color: #666;
  font-size: 18px;
  width: 554px;
}
.vip-content-left img {
  margin-top: 32px;
  margin-left: 32px;
}
/* 会员功能 */

/* 其他部分功能样式 */
.other {
  width: 1100px;
  height: auto;
  /* border: 1px solid red; */
  margin: auto;
  margin-bottom: 20px;
}
.other ul {
  padding-top: 0px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.other ul li {
  width: 21%;
  text-align: center;
  /* border: 1px solid red; */
  margin: 0 15px;
  margin-bottom: 15px;
}
.other-image {
  margin: auto;
  width: 180px;
  height: 180px;
  background-color: white;
  margin-bottom: 20px;
  img{
    margin-top:50px ;
  }
}
.other ul li b {
  color: #00b050;
  padding-bottom: 10px;
  font-weight: normal;
}
.manav {
  width: 15%;
  border-radius: 5px;
  text-align: center;
  line-height: 60px;
  margin-top: 40px;
  margin: auto;
  background-image: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(rgb(241, 162, 125)),
    to(rgb(240, 103, 77)),
    color-stop(0.5, rgb(240, 120, 91))
  );
  color: white;
}
/* 其他部分功能样式 */

/* 生鲜动态 */
.dynamic {
  background-color: #fff;
  width: 100%;
  height: auto;
}
.dyn-center {
  width: 1100px;
  margin: 0 auto;
  padding-bottom: 50px;
  position: relative;
  z-index: 1;
}
.dyn-center h2 {
  text-align: center;
  padding-top: 50px;
  font-size: 36px;
  color: #666;
  display: block;
  font-style: normal;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.dyn-center h2::before {
  content: "";
  width: 55px;
  height: 0px;
  border-bottom: 3px solid #79b5ff;
  position: absolute;
  left: 50%;
  bottom: -13px;
  margin: -0px 0px 0px -27px;
  z-index: 5;
}
.dyn-content {
  width: 1100px;
  height: auto;
  /* border: 1px solid red; */
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.dyn-left {
  width: 490px;
  /* border: 1px solid red; */
}
.dyn-left a {
  text-decoration: none;
  color: black;
  margin-top: 20px;
  /* height: 40px; */
  /* line-height: 60px; */
  /* border: 1px solid red; */
}
.dyn-left span {
  height: 65px;
  line-height: 65px;
  color: #000;
  font-size: 20px;
  display: block;
  text-align: center;
}
.dyn-right {
  margin-right: 40px;
  width: 490px;
  /* border: 1px solid red; */
}
.dyn-right ul {
  display: flex;
  flex-direction: column;
}
.dyn-right ul li {
  height: 65px;
  border-bottom: 1px solid #d9d9d9;
}

.dyn-right ul li a {
  /* color: black; */
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-left: 15px;
  font-size: 18px;
  line-height: 65px;
  color: #666;
}
.dyn-right ul li:hover a {
  color: blue;
}
.dyn-right ul li a::before {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
}
.mores {
  display: block;
  width: 66px;
  height: 66px;
  /* background-color: blue; */
  line-height: 66px;
  text-align: center;
  margin: 60px auto 0;
  font-size: 24px;
  border: 5px solid rgba(208, 226, 249, 0.5);
  background: #fff;
  font-weight: bold;
  border-radius: 50%;
  font-family: "宋体";
  color: #79b5ff;
}
.dyn-left img {
  width: 490px;
  height: 326px;
}
/* 生鲜动态 */

@media (min-width: 1000px) and (max-width: 5000px) {
  .shengxianbj {
    width: 100%;
    overflow: hidden;
    height: 600px;
    background: url("~@/assets/image/seafood/shenxianbj.jpg") no-repeat center;
    background-size: fill;
    .header_top {
      width: 100%;
      height: 140px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      .header_top_left {
        width: 30%;
        display: flex;
        align-items: center;
        img {
          width: 100%;
        }
      }
      .header_top_con {
        cursor: pointer;
        width: 5%;
        width: 30px;
      }
      .header_top_right {
        width: 65%;
        display: flex;
        justify-content: flex-end;
        padding: 0 10px 0;
      }
      .header_top_right a {
        padding: 0 10px;
        color: white;
        text-decoration: none;
      }
    }
    .zhong {
      width: 85%;
      margin: 0 auto;
      overflow: hidden;
      .zuo_gz {
        padding-top: 97px;
        width: 550px;
        p {
          font-size: 25px;
          color: #fff;
          padding-bottom: 20px;
        }
        span {
          font-size: 35px;
          color: #fff;
          font-weight: bold;
          line-height: 50px;
        }
        .manavs {
          background-image: -webkit-gradient(
            linear,
            0% 0%,
            0% 100%,
            from(rgb(241, 162, 125)),
            to(rgb(240, 103, 77)),
            color-stop(0.5, rgb(240, 120, 91))
          );
          width: 45%;
          text-align: center;
          border-radius: 3px;
          line-height: 50px;
          margin-top: 40px;
          a {
            text-decoration: none;
            color: #fff;
          }
        }
      }
    }
  }
  .phone_shengxianbj {
    display: none;
  }
  .shengxian_one {
    width: 100%;
    overflow: hidden;
    background: #fff;
    .zhong {
      width: 85%;
      margin: 0 auto;
      padding: 80px 0 95px 0;
      //标题
      .title {
        p {
          color: #666;
          font-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          text-align: center;
        }
      }
      ul {
        padding-top: 60px;
        overflow: hidden;
        display: flex;
        li {
          width: 21%;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-grow: 1;
          div {
            width: 115px;
            height: 115px;
            border-radius: 50%;
            background: #dfffea;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 52px;
              height: 52px;
            }
          }
          b {
            color: #00b050;
            display: block;
            font-size: 16px;
            font-weight: normal;
          }
        }
      }
    }
  }
  //三大特点样式
  .characteristic {
    width: 100%;
    .body {
      width: 85%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ul {
        width: 40%;
      }
      ul p {
        font-weight: bold;
        font-size: 60px;
        color: #ccf2d5;
      }
      ul li {
        font-size: 26px;
        font-weight: bold;
        color: #00b050;
        span {
          color: #f0674d;
        }
      }
      div {
        width: 55%;
      }
      div img {
        width: 100%;
      }
    }
  }
  //三大特点背景颜色
  .bgcolor1 {
    background: #e7fce7;
  }
  // 三大品牌任意挑选样式
  .threeselectui {
    width: 100%;
    .body {
      width: 85%;
      margin: 0 auto;
      padding: 20px 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .threeui_content {
        padding: 20px 0;
        width: 100%;
        display: flex;
        flex-flow: column wrap;
      }
      .threeui_title {
        font-weight: bold;
        color: #5caf78;
        font-size: 40px;
      }
      .threeui_remarks {
        color: #666;
        font-size: 18px;
      }
      .threeui_if {
        font-size: 80px;
        font-weight: bold;
        padding-top: 20px;
        color: #f0674d;
      }
      .threeui_text {
        font-size: 20px;
        color: #f0674d;
        height: 300px;
        writing-mode: vertical-lr;
        margin: 0 auto;
      }
      img {
        width: 15%;
        margin: 0 auto;
      }
    }
  }
  .fresh {
    overflow: hidden;
    width: 100%;
    background: -webkit-gradient(
      linear,
      0% 0%,
      0% 100%,
      from(#9cd77d),
      to(#51ab94),
      color-stop(0.5, #80c785)
    );
    .body {
      width: 85%;
      margin: auto;
      text-align: center;
      padding: 40px 0;
      .title {
        font-weight: bold;
        padding-bottom: 40px;
        font-size: 30px;
        color: #fff;
      }
      .content {
        font-size: 16px;
        color: #fff;
      }
      .body_img {
        padding: 40px 0 10px 0;
      }
    }
  }
}
@media screen and (max-width: 1000px) {
  .shengxianbj {
    display: none;
  }
  .phone_shengxianbj {
    display: block;
  }
  // .phone_shengxianbj {
  //   width: 100%;
  //   height: 50px;
  //   background: url("~@/assets/image/seafood/shenxianbj.jpg");
  //   .body {
  //     width: 90%;
  //     margin: 0 auto;
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;
  //     height: 50px;
  //     img {
  //       width: 150px;
  //       height: 30px;
  //     }
  //   .phone_nav{
  //     .el-dropdown-link{
  //       div{
  //         width: 20px;
  //       height: 15px;
  //       border: 1px solid #fff;
  //       span{
  //         width: 90%;
  //         height: 1px;
  //         background: #fff;
  //         display: block;
  //         margin: 3px 0;
  //       }
  //       }
  //     }
  //   }
  //   }
  // }
  .shengxian_one {
    width: 100%;
    overflow: hidden;
    background: #fff;
    .zhong {
      width: 80%;
      margin: 0 auto;
      padding: 40px 0 30px 0;
      //标题
      .title {
        p {
          color: #666;
          font-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          text-align: center;
        }
      }
      ul {
        width: 100%;
        padding-top: 30px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 40%;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-grow: 1;
          margin: 0 0 35px;
          div {
            width: 115px;
            height: 115px;
            border-radius: 50%;
            background: #dfffea;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 52px;
              height: 52px;
            }
          }
          b {
            color: #00b050;
            display: block;
            font-size: 16px;
            font-weight: normal;
          }
        }
      }
    }
  }
  //三大特点样式
  .characteristic {
    width: 100%;
    overflow: hidden;
    .body {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
      ul {
        width: 100%;
        display: flex;
        justify-content: center;
        height: auto;
        align-items: center;
        margin: 20px 0;
        p {
          font-weight: bold;
          font-size: 60px;
          color: #ccf2d5;
          margin: 0 20px 0 0;
        }
        li {
          font-size: 24px;
          font-weight: bold;
          color: #00b050;
          span {
            color: #f0674d;
          }
        }
      }
      div {
        width: 100%;
        height: auto;
        img {
          width: 100%;
        }
      }
    }
  }
  .characteristic2 {
    .body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column-reverse wrap;
    }
  }
  //三大特点背景颜色
  .bgcolor1 {
    background: #e7fce7;
  }
  // 三大品牌任意挑选样式
  .threeselectui {
    width: 100%;
    .body {
      width: 85%;
      margin: 0 auto;
      padding: 20px 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      .threeui_content {
        padding: 20px 0;
        width: 100%;
        display: flex;
        flex-flow: column wrap;
      }
      .threeui_title {
        font-weight: bold;
        color: #5caf78;
        font-size: 30px;
        margin: 0 0 10px;
      }
      .threeui_remarks {
        color: #666;
        font-size: 18px;
      }
      .threeui_if {
        font-size: 80px;
        font-weight: bold;
        padding: 20px 0;
        color: #f0674d;
      }
      .threeui_text {
        font-size: 20px;
        color: #f0674d;
        height: 300px;
        writing-mode: vertical-lr;
        margin: 0 auto;
      }
      img {
        width: 15%;
        margin: 0 auto;
      }
    }
  }
  .fresh {
    overflow: hidden;
    width: 100%;
    background: -webkit-gradient(
      linear,
      0% 0%,
      0% 100%,
      from(#9cd77d),
      to(#51ab94),
      color-stop(0.5, #80c785)
    );
    .body {
      width: 85%;
      margin: auto;
      text-align: center;
      padding: 40px 0;
      line-height: 30px;
      .title {
        font-weight: bold;
        padding-bottom: 40px;
        font-size: 28px;
        color: #fff;
        line-height: 40px;
      }
      .content {
        font-size: 14px;
        color: #fff;
      }
      .body_img {
        padding: 40px 0 0 0;
        width: 100%;
      }
    }
  }
  /* .vip-shengxian_four {
    width: 100%;
    background-color: #e7fce7;
  } */
  .contetn-right span:nth-child(1) {
    font-size: 1.5rem;
  }
  .content-introduce {
    width: 85%;
    height: auto;
  }
  .contetn-right span {
    font-size: 0.7rem;
    color: #666;
  }
  .Marketing-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-left: -10%; */
  }
  .content-left {
    width: 50px;
    height: 50px;
    padding: 10px;
    /* display: flex; */
    margin-left: 0;
    margin-top: 5%;
  }
  .content-left img {
    padding: 0;
    /* margin: -20px 0 0 0; */
    margin-top: 0;
    margin-left: 5px;
    width: 80%;
    height: 80%;
    /* margin-left: 50px; */
  }
  .shengxian_four {
    width: 100%;
  }

  .vip-right span:nth-child(1) {
    font-size: 1.5rem;
  }
  .vip-introduce {
    height: auto;
  }
  .vip-right span {
    font-size: 0.7rem;
    color: #666;
  }
  .vip-left {
    width: 50px;
    height: 50px;
    padding: 10px;
    display: flex;
    margin-left: 10%;
    margin-top: 5%;
  }
  .vip-left img {
    padding: 0;
    margin: 0;
    /* margin-left: 30px; */
    /* margin-left: -50px; */
  }
  .vip-shengxian_four {
    width: 100%;
    height: auto;
    padding-bottom: 50px;
  }
  .vip-content-introduce {
    width: 85%;
    height: auto;
    margin: 0;
    padding: 20px 0;
  }
  .vip-content-left {
    width: 50px;
    height: 50px;
    padding: 10px;
    display: flex;
    margin-left: 0;
    margin-top: 5%;
  }
  .contetn-right {
    height: auto;
    margin-left: 40px;
    margin-top: 5%;
    width: calc(100% - 110px);
  }
  .contetn-right span {
    width: auto;
  }
  .vip-contetn-right {
    overflow: hidden;
    margin-top: 5%;
  }
  .vip-contetn-right span {
    display: block;
    width: 100%;
    font-size: 0.7rem;
  }
  .vip-content-left img {
    margin: 0;
    padding: 0;
  }

  .other-image {
    width: auto;
    height: auto;
  }
  .other {
    width: 100%;
  }
  .other ul {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 28%;
      margin: 0 2% 20px;
      div {
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 20px;
        img {
          margin: 0;
        }
      }
    }
  }
  .manav {
    width: 85%;
    height: auto;
  }
  .dynamic {
    width: 100%;
  }
  .dyn-center h2 {
    width: 100%;
    text-align: center;
    width: 45%;
    margin: 0;
    padding: 0;
  }
  .vip-Marketing-content {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .dyn-left {
    display: none;
  }
  .mores {
    display: none;
  }
  .dyn-center {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .dyn-content {
    width: 100%;
    margin: 0;
    padding: 0;
    .dyn-right{
      width: 85%;
      margin: 0 auto;
      padding: 0 7px;
    }
  }
  .dyn-right ul li a {
    font-size: 0.7rem;
    margin-top: 5px;
  }
}
</style>
